// Place all the styles related to the admin controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: http://sass-lang.com/

@import "compass/css3";
@import "bootstrap-sprockets";
@import "bootstrap";

.glyphicon {
	font-size: 16px;
}

.is-transitioning {
    display: block !important;
   	visibility: visible !important;
}

.nav-drawer {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	width: 230px;
	color: white;
	overflow: hidden;

	.nav-drawer-pannel {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
	}

	.nav-item {
		padding: 0 10px 0 20px;
		height: 40px;
		color: #c3cfd8;

		@include display-flex;
		@include align-items(center);

		&:hover {
			cursor: pointer;
			text-decoration: none;
			color: white;
		}

		&.current {
			color: white;
			opacity: 1 !important;
			background-color: #454e57;
		}
	}

	.nav-drawer-pannel-primary {
		width: 230px;
		background-color: #31373d;

		@include transition(background-color 200ms ease);

		.nav-drawer-logo {
			height: 56px;
			background-color: #272c30;
		}

		.nav-drawer-search-container {
		
		}

		ul {
			list-style: none;
			margin: 0;
			padding: 0;
		}

		.nav-item {
			@include transition(all 100ms ease);

			.nav-item-span-text {
				margin-left: 10px;
				@include transition(transform 200ms ease);
			}
		}

		.nav-item-has-submenus {
			.glyphicon-menu-right {
				font-size: 12px;
			}

			.nav-item-span-text {
				@include flex(1);
			}
		}
	}

	.nav-drawer-pannel-secondary {
		width: 174px;
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		background-color: #31373d;
		visibility: hidden;

		@include translateX(230px);
		@include transition(transform 200ms ease);

		ul {
			list-style: none;
			margin: 0;
			padding: 0;
		}

		.nav-sub-menus {
			display: none;

			.nav-header {
				height: 56px;
				padding: 0 10px 0 20px;
				border-bottom: 1px solid #212529;

				@include display-flex;
				@include align-items(center);
			}

			&.active {
				display: block;
			}
		}
	}

	&.secondary-expanded {
		.nav-drawer-pannel-primary {
			background-color: #212529;

			.nav-item-span-text {
				@include translateX(-5px);
				@include opacity(0);
			}

			.nav-item {
				@include opacity(0.45);

				&.current {
					background-color: transparent;
				}
			}
		}

		.nav-drawer-pannel-secondary {
			visibility: visible;
			@include translateX(56px);
		}
	}
}

#pageContent {
	background-color: #ebeef0;
	padding: 76px 0 20px 230px;
}

#pageContentHeader {
	position: fixed;
	top: 0;
	left: 230px;
	right: 0;
	height: 56px;
	background-color: white;
	box-shadow: 0 1px 0 rgba(0,0,0,0.07);
}

#pageContentHeaderInner {
	height: 56px;
	padding: 0 20px;
	@include display-flex;
	@include flex-direction(row);
	@include align-items(center);

	.header {
		margin: 0;
		font-size: 24px;
		@include flex(1);
	}
}